import React from 'react'
import ProgramAssignmentsStatusBox from './program-assignments-status-box'
import ProgramTopicsStatusBox from './program-topics-status-box'
import { Divider, message, Row, Spin, Switch } from 'antd'
import { convertContent } from '../../../../../constant/lang-util'
import RefreshTool from '../../../../common/refresh-tool'
import { getProgramStudentAssignmentStatus } from '../../../../../actions/program'
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'

class ProgramAssignmentsBody extends React.Component {
  state = {
    isShowTopicStatus: true,
    currentTopic: '',
    spinning: true,
    isShowAssignmentStatus: true
  }
  componentDidMount = () => {
    const {user} = this.props
    const {programId} = this.props.match.params
    if (user.id > 0) {
      this.props.getProgramStudentAssignmentStatus(programId, user.id, `训练营作业情况`, () => {
        this.setState({spinning: false, programId})
      })
    }
  }

  refreshProgramStudentAssignmentStatus = () => {
    const {user} = this.props
    const {programId} = this.props.match.params
    this.setState({spinning: true})
    this.props.getProgramStudentAssignmentStatus(programId, user.id, `训练营作业情况`, () => {
      this.setState({spinning: false})
    }, false)
  }

  componentWillReceiveProps = nextProps => {
    const {user} = nextProps
    if (this.props.user === user) {
      return false
    }
    const {programId} = this.props.match.params
    this.props.getProgramStudentAssignmentStatus(programId, user.id, `训练营作业情况`, () => {
      this.setState({spinning: false, programId})
    })
  }
  formatTopic = (myStudentAssignments) => {
    return [...new Set(myStudentAssignments.map(item => item['主题']))]
  }
  onChangeTopic = currentTopic => {
    this.setState({currentTopic, isShowTopicStatus: false})
  }
  filter = (myStudentAssignments) => {
    const {currentTopic} = this.state
    return myStudentAssignments.filter(item => item['主题'] === currentTopic)
  }

  showTopicStatus = () => {
    this.setState({isShowTopicStatus: true, currentTopic: ''})
  }
  exportExcel = () => {
    const {programId} = this.props.match.params
    const {user} = this.props
    window.location.href = `/learn/program-center/api/myStudents/types/${'训练营作业情况'}/programs/${programId}/tutors/${user.id}/exportExcel`
    message.info('Exporting, please waiting...')
  }

  render () {
    const {isShowTopicStatus, spinning, currentTopic, isShowAssignmentStatus} = this.state
    const {programStudentAssignments} = this.props
    return <Spin size="large" spinning={spinning} tip='loading'>

      {isShowTopicStatus
        ? <div>
          <Row type='flex' justify='space-between'>
            <a onClick={this.exportExcel}>
              {convertContent('导出')} Excel
            </a>
            <RefreshTool
              refresh={this.refreshProgramStudentAssignmentStatus}
              refreshTime={programStudentAssignments.refreshTime}
            />
          </Row>
          <Divider/>
          <ProgramTopicsStatusBox
            myStudentAssignments={programStudentAssignments.data}
            topicsTitle={this.formatTopic(programStudentAssignments.data)}
            onChangeTopic={this.onChangeTopic}
          />
        </div>
        : <div>
          <a href='javascript:(0)' onClick={this.showTopicStatus}>
            {convertContent('返回')} | {currentTopic}
          </a>
          <Divider type='vertical'/>
          <Switch checked={isShowAssignmentStatus}
                  onChange={isShowAssignmentStatus => this.setState({isShowAssignmentStatus})}/>
          <Divider/>
          <ProgramAssignmentsStatusBox
            taskAssignmentStatus={this.filter(programStudentAssignments.data)}
            isShowAssignmentStatus={isShowAssignmentStatus}
          />
        </div>
      }
    </Spin>

  }
}

const mapStateToProps = ({programStudentAssignments, user}) => ({
  programStudentAssignments, user
})
const mapDispatchToProps = dispatch => ({
  getProgramStudentAssignmentStatus: (programId, tutorId, type, callback, cache) => dispatch(getProgramStudentAssignmentStatus(programId, tutorId, type, callback, cache)),
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(ProgramAssignmentsBody))
